// 加入黑名单界面
import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router';
require("./home.css");

class AddBlack extends React.Component{

    constructor(){
        super();
        this.state = {
            query : [],
            addBlackText: ''
        }
    }

    componentWillMount(){
        this.FetchData();
    }

    //将当前选中的员工的user_id，company_id提交到服务器然后setState到query里面
    FetchData(){
        const userSessionStorage = JSON.parse(window.sessionStorage.getItem('userStorage'));
        fetch("http://121.196.202.247:1010/select_user/?format=json", {
            method: "POST",
            headers: {
                'Accept': 'application/json',
                "Content-Type": "application/json; charset=utf-8"
            },
            body: JSON.stringify({
                user_id: this.props.location.query.selectUser,
                company_id: userSessionStorage.company_id,
            })
        }) .then((response) => response.json())
            .then((responseText) => {
                this.setState({query:responseText});
                console.log("1111111111"+JSON.stringify(responseText));
            }).catch((error) => {alert(error+"连接职信服务器失败，请查看网络连接状态并刷新页面！")});
    }

    handleSubmit(e) {
        e.preventDefault();
        if(ReactDOM.findDOMNode(this.refs.addBlack).value.trim() == ''){
            alert("请输入加入黑名单的原因！");
        }else {
            const userSessionStorage = JSON.parse(window.sessionStorage.getItem('userStorage'));
            fetch("http://121.196.202.247:1010/prize_punish/?format=json", {
                method: "POST",
                headers: {
                    'Accept': 'application/json',
                    "Content-Type": "application/json; charset=utf-8"
                },
                body: JSON.stringify({
                    rwdpun_user: this.state.query[0].user_id,
                    rewpun_people_id: userSessionStorage.user_id,
                    is_black: 1,
                    rwdpun_content: this.state.addBlackText
                })
            }).then((response) => response.json())
                .then((responseText) => {
                    console.log("33333" + responseText);
                    console.log("33333" + JSON.stringify(responseText));
                    alert("将该员工加入黑名单操作成功！已将该员工移出本公司！");
                }).catch((error) => {
                alert(error + "连接职信服务器失败，请查看网络连接状态并刷新页面！")
            });
        }
    }

    // 实时根据输入的值改变奖惩信息内的值
    handleChange(e){
        this.setState({addBlackText: e.target.value});
    }

    render(){
        console.log(this.state.query);
        console.log(this.state.query.length);
        if(this.state.query.length == 1){
            return(
                <form className="add_black" onSubmit={function (e) {this.handleSubmit(e)}.bind(this)}>
                    <p>当前选定的员工姓名为：{this.state.query[0].user_name} ，职信号为：{this.props.location.query.selectUser}，手机号为：{this.state.query[0].user_phone}。</p>
                    <p>如确认要将当前员工加入黑名单请填写相应原因，例如“打架降级，屡次违反公司规定等等”。</p>
                    <textarea placeholder="请输入加入黑名单的原因......" value={this.state.addBlackText} onChange={this.handleChange.bind(this)} ref="addBlack"/><br/>
                    <input type="submit" value="确认加入" className="add_black_submit"/>
                    <Link to='/home_query_hr'><input type="button" value="返回" className="add_black_back"/></Link>
                </form>
            );
        }else{
            return(
                <p>正在加载中......</p>
            );
        }
    }
}

export default AddBlack;